<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"> 
	<title th:text="${gameAccount.title}"></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" th:href="@{/page/css/swiper.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/page/css/index.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/page/css/page.css}">
	<link th:href="@{/css/font-awesome.min.css?v=4.7.1}" rel="stylesheet"/>
	<style>
		.swiper-pagination-bullet{height:20px;font-size:12px;line-height:20px;color:#333;}
		.swiper-pagination-bullet-active{color:#Fff;}
		/* 设置滚动条的样式 */
		::-webkit-scrollbar {
			width:4px;
		}
		/* 滚动槽 */
		::-webkit-scrollbar-track {
			-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
			border-radius:10px;
		}
		/* 滚动条滑块 */
		::-webkit-scrollbar-thumb {
			border-radius:10px;
			background:rgba(0,0,0,0.1);
			-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
		}
		::-webkit-scrollbar-thumb:window-inactive {
			background:rgba(255,0,0,0.4);
		}
		#copybtn{
			display: inline-block;
			padding: 2px 5px;
			background: #1a1a1a;
			color:#Fff;
			margin-left: 10px;
			border-radius: 5px;
			cursor: pointer;
		}
		html,body{overflow:hidden;overflow-y:auto;}
	</style>
	<script th:src="@{/page/js/jq.js}"></script>
	<script th:src="@{/page/js/clipboard.min.js}"></script>
</head>
<body>
	<div class="w100 bgr">
		<div class="header" style="background: #1a1a1a;">
			<div class="logo" style="position: relative">
				<i class="fa fa-reply" onclick="closeT()" aria-hidden="true"
				   style="font-size: 24px;position: absolute;top:calc(50% - 12px);color:white;float: left;background: #1a1a1a;margin-left: 10px;"></i>
				<h1 style="margin-left: 50px;background: #1a1a1a;color:white" th:text="${gameAccount.gameName} +'账号详情页'">详情页 </h1>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="w100 bgy non">
		<div class="nav">
			<a href="/">首页</a>
			<!--<a href="/question">常见问题</a>
			<a href="/answer">流程介绍</a>-->
		</div>
	</div>
	<div class="main">
		<div class="title" th:text=" ${gameAccount.title}">	</div>
		<div class="text" >
			<span style="color: red;">编号: </span><span style="color: red;" th:text="${gameAccount.accountNo}"></span>
			<span style="color: red;">账号: </span><span style="color: red;" id="textDiv" th:text="${gameAccount.gameNo}"></span>
			<span id="copybtn">一键复制</span></div>
		<input id='textArea' value="" style='display: none'>
		<div class="price" th:text="'$' + ${gameAccount.price}">$1150</div>
		<div class="text" th:utext="${gameAccount.detail}"></div>
		<div>
			<img th:each="item,state: ${#strings.arraySplit(gameAccount.imgs,',')}" th:src="${item}" style="width: 100%;">
		</div>
		<div class="clear"></div>
	</div>
	<!--<div class="copyright">
		<p><a href="javascript:void(0)" th:text="${gameAccount.gameName}"></a></p>
	</div>-->
	<!--<div class="tabbar">
		<div class="tabbox">
			<a href="/"><i style="font-size: 24px" class="fa fa-home"></i><p>首页</p></a>
		</div>
		<div class="tabbox">
			<a href="/wx"><i style="font-size: 24px" class="fa fa-user"></i><p>店长微信</p></a>
		</div>
		<div class="tabbox">
			<a href="/lc"><i style="font-size: 24px" class="fa fa-exchange"></i><p>交易流程</p></a>
		</div>
	</div>-->
<script th:inline="javascript">
	var clipboard = new ClipboardJS('#copybtn', {
		text: function () {
			return $("#textDiv").text();
		},
	});

	clipboard.on('success', function (e) {
		alert("复制成功!");
		console.log(e);
	});

	clipboard.on('error', function (e) {
		console.log(e);
	});

	function closeT(){
		 parent.closeT();
	}
	/*<script th:src="@{/page/js/swiper.js}">
	var mySwiper = new Swiper('.swiper-container', {
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
			renderBullet: function (index, className) {
			  return '<span class="' + className + '">' + (index + 1) + '</span>';
			}
			
		},
		lazy: {
			loadPrevNext: true,
		},
		loop : true,
		navigation: {
		  nextEl: '.swiper-button-next',
		  prevEl: '.swiper-button-prev',
		},
		grabCursor : true,
	})*/
	$("#gotop").click(function() {
		$('body,html').animate({
		  scrollTop: 0
		},
		500);
		return false;
	});
</script>
</body>
</html>